<template>
  <h1>{{ msg }}</h1>
  <p>-------------------------------</p>
  <div>
    <a href="#">测试sass样式111</a>
  </div>
  <p>
    <el-button type="primary" @click="addCount">测试 pinia: {{ testStore.count }}</el-button>
  </p>

  <p>test: count: {{ count }}</p>
  <ul>
    <li v-for="(item, i) in testStore.tabs" :key="i">
      {{ item.num }}
    </li>
  </ul>

  <el-button @click="clear">清空</el-button>
  <el-button @click="reset">重置</el-button>
  <el-button @click="addCount">add</el-button>

  <div ref="el">
    <div style="background-color: #fff; height: 100%">aaaa</div>
  </div>
  <el-button @click="toggle">全屏</el-button>
</template>

<script setup>
import { useFullscreen } from '@vueuse/core'
import { storeToRefs } from 'pinia'
import testStoreCreater from '@/store/testStore.js'
import { testDict } from '@/dict/testDict'

console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> testDict.arrData')
console.log(testDict.arrData)
console.log(testDict.jsonData)
console.log(testDict.getJsonData('id'))

const el = ref(null)
const { toggle } = useFullscreen(el)

defineProps({
  msg: {
    type: String,
    default: '',
  },
})

const testStore = testStoreCreater()
const { count } = storeToRefs(testStore) // 解构需要用storeToRefs，就可以直接用count，不用再写testStore.count了

const addCount = () => {
  console.log(':::::::::::::::::::::::', count)
  count.value = count.value + 1
}
const clear = () => {
  testStore.tabs = []
  console.log('1111111111', testStore.tabs)
}
const reset = () => {
  testStore.$reset()
}
</script>

<style scoped lang="scss">
div {
  a {
    color: #42b983;
  }
}
</style>
